<template>
  <div class="login">
    <h1>注册</h1> 
    <!-- <div>{{$store.state.count}}</div> -->
    <!-- <button @click="gogo">
      改变vuex的值
    </button> -->
     <p><label>用 户 名：</label><input v-model="name" type="text" placeholder="用户名"></p>
    
    <p class="phone_con"><label>&nbsp;&nbsp;手机号：</label><input type="text" v-model="phone" placeholder="请输入用户名"><span @click="getnum" class="code fr">{{inner}}</span></p>
    <p><label>&nbsp;&nbsp;验证码：</label><input v-model="code" type="text" placeholder="请输入验证码"></p>
     <p><label>设置密码：</label><input v-model="newpsw" type="password" placeholder="设置密码"></p>
    <!-- <a href="{path:'index'}">登录</a> -->
    <p><button  @click="nice" class="btn">注册</button></p>
    <p>若您已经有账号请前往<button @click="denglu">登录</button></p>
   </div>
</template>

<script>
export default {
  name: "login",
  data() {
    return {
      msg: "注册页面",
      name: "",
      phone: "",
      code: "",
      newpsw: "",
      inner: "获取验证码",
      gocodeb: true
    };
  },
  // computed: {//这里是计算属性
  //   jieshow () {
  //     return this.$store.state.count
  //   }
  // },
  methods: {
    // gogo(){
    //   this.$store.state.count=""
    // },
    getnum() {
      let t = 60;
      console.log(t);
      var mobile = /^1[0-9]{10}$/;
      if (!mobile.test(this.phone)) {
        this.$layer.alert("手机号码不正确");
        return false;
      }
      var _this = this;
      if (this.gocodeb) {
        // let params = new URLSearchParams();
        // params.append("phone", this.phone);
        // params.append("forget", 0);
        // let params = qs();

        // let params = ;
        //开始获取
        this.$http
          .post(
            "http://medical.qingguo188.com/user/sendsms",
            {
              phone: this.phone,
              forget: 0
            },
            {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded"
            }
          }
          )
          .then(
            rester => {
              console.log(rester.data);
              if (rester.data.status == 0) {
                this.$layer.alert(rester.data.$message);
                return false;
              } else {
                this.$layer.alert("发送成功！");
              }

              _this.gocodeb = false; //禁止请求过程中单机按钮
              var timer = setInterval(function() {
                t--;
                if (t == 0) {
                  _this.inner = "获取验证码";
                  _this.gocodeb = true;
                  clearInterval(timer);
                } else {
                  _this.inner = t + "s";
                }
              }, 1000);
              //this.$router.push({ path: "index" }); //登录成功跳转页面
            },
            function() {
              this.$layer.alert("网络错误！");
            }
          );
      }
    },
    nice() {
      //提交
      if (this.name == "") {
        this.$layer.alert("用户名不能为空！");
        return false;
      }

      if (this.phone == "" || this.code == "") {
        this.$layer.alert("手机号和验证码不能为空！");
        return false;
      }
      if (this.newpsw == "") {
        this.$layer.alert("请设置密码");
        return false;
      }
      // let params = new URLSearchParams();
      // params.append("name", this.name);
      // params.append("phone", this.phone);
      // params.append("code", this.code);
      // params.append("password", this.newpsw);

      this.$http
        .post(
          "http://medical.qingguo188.com/user/register",
          {
            name: this.name,
            phone: this.phone,
            code: this.code,
            password: this.newpsw
          },
          {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded"
            }
          }
        )
        .then(
          rester => {
            console.log(rester.data);
            if(rester.data.status==1){
                 this.$layer.msg("注册成功");
                 this.$router.push({ path: "/" }); //注册成功跳转登录页面
            }else{
                this.$layer.alert(rester.data.$message)
            }
            
          },
          function() {
            this.$layer.alert("网络错误！");
          }
        );
    },
    denglu() {
      this.$router.push({ path: "/" }); //登录成功跳转页面
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.phone_con {
  position: relative;
}
.code {
  position: absolute;
  display: inline-block;
  height: 32px;
  line-height: 32px;
  padding: 0 10px;
  border-radius: 5px;
  background: orangered;
  margin-left: 10px;
  color: #ffffff;
  cursor: pointer;
  right: 0;
}
h1 {
  text-align: center;
  line-height: 2;
  font-size: 24px;
}
p {
  text-align: center;
  margin-top: 20px;
}
label {
  display: inline-block;
  width: 70px;
  text-align: center;
}
.forgetpaw {
  color: #008df6;
  margin-top: 10px;
  margin-right: 100px;
  cursor: pointer;
}
body {
  color: #f1f1f1;
}
.login {
  width: 500px;

  position: relative;
  border: 1px solid #dedede;
  left: 50%;
  top: 200px;
  margin-left: -250px;
  padding: 20px;
}
</style>
